<template>
    <div class="member-management">
      <!-- 搜索和筛选 -->
      <div class="search-bar">
        <div class="search-input">
          <input
            type="text"
            v-model="searchKeywords"
            placeholder="搜索会员昵称、ID"
          />
          <button @click="handleSearch">搜索</button>
        </div>
        <div class="filters">
          <label>会员状态:</label>
          <select v-model="statusFilter">
            <option value="all">全部</option>
            <option value="active">有效</option>
            <option value="expired">已过期</option>
          </select>
        </div>
      </div>
  
      <!-- 会员列表 -->
      <div class="member-table">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>昵称</th>
              <th>会员有效期</th>
              <th>等级</th>
              <th>联系方式</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(member, index) in displayedMembers" :key="member.id">
              <td>{{ member.id }}</td>
              <td>{{ member.nickname }}</td>
              <td>
                {{ member.membershipStart }} - {{ member.membershipEnd }}
              </td>
              <td>{{ member.level }}</td>
              <td>{{ member.contact }}</td>
              <td>
                <button @click="viewDetails(member)">查看详情</button>
                <button @click="editMember(member)">编辑</button>
                <button @click="deleteMember(member)">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
  
        <!-- 分页 -->
        <div class="pagination">
          <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
          <span>{{ currentPage }} / {{ totalPages }}</span>
          <button @click="nextPage" :disabled="currentPage === totalPages">
            下一页
          </button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed } from 'vue';
  
  // 会员数据接口
  interface Member {
    id: number;
    nickname: string;
    membershipStart: string;
    membershipEnd: string;
    level: string;
    contact: string;
    status: 'active' | 'expired';
  }
  
  // 假设的会员数据
  const members: Member[] = [
    {
      id: 1,
      nickname: '张三',
      membershipStart: '2024-01-01',
      membershipEnd: '2025-01-01',
      level: '白银',
      contact: 'zhangsan@example.com',
      status: 'active',
    },
    {
      id: 2,
      nickname: '李四',
      membershipStart: '2023-06-15',
      membershipEnd: '2024-06-15',
      level: '黄金',
      contact: 'lisi@example.com',
      status: 'active',
    },
    {
      id: 3,
      nickname: '王五',
      membershipStart: '2022-11-20',
      membershipEnd: '2023-11-20',
      level: '钻石',
      contact: 'wangwu@example.com',
      status: 'expired',
    },
    {
      id: 4,
      nickname: '赵六',
      membershipStart: '2023-02-10',
      membershipEnd: '2024-02-10',
      level: '黄金',
      contact: 'zhaoliu@example.com',
      status: 'active',
    },
    {
      id: 5,
      nickname: '钱七',
     membershipStart: '2022-09-05',
     membershipEnd: '2023-09-05',
     level: '白银',
     contact: 'qianqiu@example.com',
     status: 'expired',
    }
    // 更多会员数据...
  ];
  
  // 搜索相关
  const searchKeywords = ref('');
  const statusFilter = ref<'all' | 'active' | 'expired'>('all');
  
  // 分页相关
  const itemsPerPage = 10;
  const currentPage = ref(1);
  const totalItems = ref(members.length);
  const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage));
  
  // 过滤和分页后的会员数据
  const filteredMembers = computed(() => {
    let temp = members;
  
    // 关键字搜索
    if (searchKeywords.value) {
      const keywords = searchKeywords.value.toLowerCase();
      temp = temp.filter(
        (member) =>
          member.nickname.toLowerCase().includes(keywords) ||
          member.id.toString().includes(keywords)
      );
    }
  
    // 状态筛选
    if (statusFilter.value !== 'all') {
      temp = temp.filter((member) => member.status === statusFilter.value);
    }
  
    return temp;
  });
  
  const displayedMembers = computed(() => {
    const start = (currentPage.value - 1) * itemsPerPage;
    const end = start + itemsPerPage;
    return filteredMembers.value.slice(start, end);
  });
  
  // 分页操作
  const prevPage = () => {
    if (currentPage.value > 1) {
      currentPage.value--;
    }
  };
  
  const nextPage = () => {
    if (currentPage.value < totalPages.value) {
      currentPage.value++;
    }
  };
  
  // 会员操作方法
  const viewDetails = (member: Member) => {
    alert(`查看会员详细信息: ${member.nickname}`);
  };
  
  const editMember = (member: Member) => {
    alert(`编辑会员信息: ${member.nickname}`);
  };
  
  const deleteMember = (member: Member) => {
    alert(`删除会员: ${member.nickname}`);
  };
  
  // 搜索方法
  const handleSearch = () => {
    totalItems.value = filteredMembers.value.length;
    currentPage.value = 1; // 重置到第一页
  };
  </script>
  
  <style scoped>
  .member-management {
    width: 80%;
    margin: 40px auto;
    padding: 20px;
  }
  
  .search-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .search-input {
    display: flex;
    gap: 10px;
  }
  
  .search-input input {
    padding: 8px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .search-input button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    background-color: #409eff;
    color: #fff;
    cursor: pointer;
  }
  
  .search-input button:hover {
    background-color: #66b1ff;
  }
  
  .filters {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .filters select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .member-table {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  
  table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
  }
  
  th,
  td {
    border: 1px solid #ebeef5;
    padding: 12px;
    text-align: left;
  }
  
  th {
    background-color: #f5f7fa;
    color: #333;
  }
  
  td button {
    margin-right: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
  }
  
  td button:first-child {
    background-color: #409eff;
    color: #fff;
  }
  
  td button:first-child:hover {
    background-color: #66b1ff;
  }
  
  td button:nth-child(2) {
    background-color: #e6a23c;
    color: #fff;
  }
  
  td button:nth-child(2):hover {
    background-color: #ebb563;
  }
  
  td button:last-child {
    background-color: #f56c6c;
    color: #fff;
  }
  
  td button:last-child:hover {
    background-color: #f78989;
  }
  
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  
  .pagination button {
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    background-color: #f4f4f5;
    color: #606266;
    cursor: pointer;
  }
  
  .pagination button:disabled {
    background-color: #e4e7ed;
    cursor: not-allowed;
  }
  
  .pagination span {
    color: #606266;
  }
  </style>